<template>
  <el-menu
    :default-active="routePath"
    class="el-menu-vertical-demo"
    :collapse="isCollapse"
    @open="handleOpen"
    @close="handleClose"
    router
  >
    <div class="isCollapse" @click="isCollapse = !isCollapse">
      <el-icon v-show="isCollapse" v-for="(item, index) in 3" :key="index">
        <ArrowRight />
      </el-icon>
      <el-icon v-show="!isCollapse" v-for="(item, index) in 3" :key="index">
        <ArrowLeft />
      </el-icon>
    </div>
    <el-menu-item
      :index="item.path"
      v-for="(item, index) in routerMenu"
      :key="index"
      @click="addTabsStore(item)"
    >
      <el-icon>
        <component class="icons" :is="item.menuIcon"></component>
      </el-icon>
      <template #title>{{ item.menuName }}</template>
    </el-menu-item>
  </el-menu>
</template>

<script lang="ts" setup>
import { ref, watchEffect } from "vue";
import router from "@/router/index.js";
import { useRoute } from "vue-router";
import { useTabs } from "@/store/tabs.js";
const store = useTabs();
// 获取当前路由实例
const route = useRoute();
// 获取路由菜单
const routerMenu = router.options.routes[1].children;
// 控制菜单折叠状态
const isCollapse = ref(true);
// 定义默认激活的菜单项路径
const routePath = ref(route.path);

// 监听路由变化，更新 routePath
watchEffect(() => {
  routePath.value = route.path;
});

// // 菜单打开事件处理函数
// const handleOpen = (key: string, keyPath: string[]) => {
//   console.log(key, keyPath);
// };
// // 菜单关闭事件处理函数
// const handleClose = (key: string, keyPath: string[]) => {
//   console.log(key, keyPath);
// };

// 存入pinia
const addTabsStore = (item) => {
  store.addTab({
    path: item.path,
    name: item.menuName,
  });
};
</script>

<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: calc(100vh - 60px);
}
.el-menu--collapse {
  min-height: calc(100vh - 60px);
}
.isCollapse {
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  transition: 0.3s;
  font-size: 0.7em;
  position: relative;
}
.isCollapse::after {
  content: "";
  width: 100%;
  height: 1px;
  background: #bfbfbf46;
  position: absolute;
  bottom: 0%;
  left: 0%;
}
.isCollapse:hover {
  background: #2b70ad0c;
  transition: 0.3s;
}
</style>
